@import "../../../style/root.scss";
@import "../../../style/edit.scss";
@include tip;

// @include tip;
.container {
  height: 95vh;
  @include padding-box(30rpx 30rpx 130rpx 30rpx);
}
.top-title {
  font-size: 46rpx;
  font-weight: 600;
  margin-bottom: 30rpx;
}
.title-mini {
  color: #565868;
  font-size: $font-small;
}
.random {
  background: #ffffff;
  border-radius: 29rpx;
  border: 1rpx solid #e8e9ea;
  display: flex;
  justify-content: center;
  align-items: center;
  color: $green;
  @include padding-box(9rpx 16rpx);
  .random-img {
    width: 30rpx;
    height: 30rpx;
    margin-left: 10rpx;
  }
}
.formwork-box {
  position: relative;
  width: 100%;
  min-height: 320rpx;
  overflow: scroll;
  .formwork-hide {
    // opacity: 0;
    position: relative;
    z-index: 100;
  }
  textarea {
    caret-color: #ccc;
    color: transparent;
  }
  #formwork {
    width: 100%;
    position: absolute;
    line-height: 1.4;
    font-size: 28rpx;
  }
  .formwork {
    @include padding-box(0 0 30rpx 0);
    // white-space: pre-wrap;
    // word-wrap: break-word;
    white-space: pre-wrap;
    border-radius: 16rpx;
    caret-color: tomato;
    color: transparent;
  }
  .formwork-reveal {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 320rpx;
    z-index: -1;
    .rich-text {
      width: 100%;
      height: 320rpx;
    }
  }
}
.formwork-record-num {
  color: #c9cbd8;
  font-size: 28rpx;
  float: right;
  text-align: right;
}
.label-title {
  margin-top: 40rpx;
  .title {
    @include padding-box(6rpx 30rpx);
    font-weight: 600;
    color: #202536;
    background: #f4f4f7;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 26rpx;
    width: 150rpx;
    height: 52rpx;
  }
  .label-list {
    border-bottom: 1rpx solid #f4f4f7;
    @include padding-box(30rpx 0);
    flex-wrap: wrap;
  }
  .label-i {
    padding: 13rpx 12rpx;
    background: #f4f4f7;
    border-radius: 8rpx;
    color: #565868;
    font-size: 24rpx;
    margin: 0 12rpx 12rpx 0;
  }
}
.file-title {
  margin-top: 30rpx;
}
.file-list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 30rpx;
  .file-i {
    position: relative;
    width: 210rpx;
    height: 210rpx;
    border-radius: 16rpx;
    margin: 0rpx 20rpx 30rpx 0;
  }
  .photo {
    width: 210rpx;
    height: 210rpx;
    border-radius: 16rpx;
  }
  .delete-file {
    position: absolute;
    top: 10rpx;
    right: 10rpx;
    width: 36rpx;
    height: 36rpx;
  }
}
.bottom-btn {
  width: 100%;
  position: fixed;
  bottom: 0;
  left: 0;
  height: calc(150rpx + constant(safe-area-inset-bottom));
  height: calc(150rpx + env(safe-area-inset-bottom));
  background: #ffffff;
  z-index: 10;

  .btn-group {
    margin: 0 auto;
    margin-bottom: calc(20rpx + constant(safe-area-inset-bottom));
    margin-bottom: calc(20rpx + env(safe-area-inset-bottom));
  }
  .showPricePopup {
    width: 345rpx;
    height: 88rpx;
    border-radius: 44rpx 0px 0px 44rpx;
    border: 2rpx solid #00d679;
    text-align: center;
    line-height: 88rpx;
    color: $green;
  }
  .payWage {
    width: 345rpx;
    height: 88rpx;
    background: $green;
    border-radius: 0rpx 44px 44px 0rpx;
    border: 2rpx solid #00d679;
    text-align: center;
    line-height: 88rpx;
    color: #ffffff;
  }
}
.input-block {
  @include padding-box(0 0 20rpx 0);
  .key {
    margin-bottom: 30rpx;
    color: #565868;
  }
  .key-input {
    font-size: 32rpx;
    color: #202536;
  }
}
.arrow-active {
  width: 40rpx;
  height: 40rpx;
}
